<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    body {
      background: #fff;
    }
    button {
      --border-radius: 15px;
      --border-width: 4px;
      border-radius: var(--border-radius);
      appearance: none;
      position: relative;
      padding: 1em 2em;
      border: 0;
      background-color: rgba(0, 0, 0, 0.06);
      font-family: "Roboto", Arial, "Segoe UI", sans-serif;
      font-size: 18px;
      font-weight: 500;
      z-index: 2;
    }

    button::after {
      --m-i: linear-gradient(#000, #000);
      --m-o: content-box, padding-box;
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding: var(--border-width);
      border-radius: var(--border-radius);
      background-image: conic-gradient(
        #488cfb,
        #29dbbc,
        #ddf505,
        #ff9f0e,
        #e440bb,
        #655adc,
        #488cfb
      );
      -webkit-mask-image: var(--m-i), var(--m-i);
      mask-image: var(--m-i), var(--m-i);
      -webkit-mask-origin: var(--m-o);
      mask-origin: var(--m-o);
      -webkit-mask-clip: var(--m-o);
      mask-clip: var(--m-o);
      mask-composite: exclude;
      -webkit-mask-composite: destination-out;
      filter: hue-rotate(0);
      animation: rotate-hue linear 500ms infinite;
      animation-play-state: paused;
    }

    button:hover::after {
      animation-play-state: running;
    }

    @keyframes rotate-hue {
      to {
        filter: hue-rotate(1turn);
      }
    }

    button,
    button::after {
      box-sizing: border-box;
    }

    button:active {
      --border-width: 5px;
    }
  </style>
  <body>
    <button>Hover me!</button>
  </body>
</html>
